<script>
import ImageLoader from '../../components/ImageLoader'

export default {
  components: {
    ImageLoader: ImageLoader,

  },
  data() {
    return {
      refWidth: {
        h3: 0,
        span: 0,
      },
      h3Width: 'auto',
      spanWidth: 'auto',
      wordOpacity: 0,

      mouseX: 0,
      mouseY: 0,

    }

  },
  props: ['data'],
  computed: {
    documentSize() {
      return {
        width: document.documentElement.clientWidth,
        height: document.documentElement.clientHeight,
      }
    },
    imgMoveNum() {
      const top = this.mouseY * 0.1
      const left = this.mouseX * 0.1
      return {
        transform: `translate(-${left}px, -${top}px)`
      }
    }
  },
  methods: {
    handLoad() {
      this.h3Width = 0
      this.spanWidth = 0
      this.wordOpacity = 1
      document.clientWidth
      setTimeout(() => {
        this.h3Width = this.refWidth.h3 + 'px'
      }, 500)
      setTimeout(() => {
        this.spanWidth = this.refWidth.span + 'px'
      }, 1000)
    },
    handMouseMove(e) {
      this.mouseX = e.clientX - 250
      if (!this.mouseX) {
        this.mouseX = 0
      }
      this.mouseY = e.clientY

    },
  },
  mounted() {
    this.refWidth.h3 = this.$refs.h3.clientWidth;
    this.refWidth.span = this.$refs.span.clientWidth;
    window.addEventListener('mousemove', this.handMouseMove)
  },
  destroyed() {
    window.removeEventListener('mousemove', this.handMouseMove)
  }
}
</script>



<template>
  <div class="img-container" ref="main">
    <div class="loader" :style="imgMoveNum">
      <ImageLoader :src="data.bigImg" :placeholder="data.midImg" @load="handLoad" ref="img" />
    </div>
    <h3 ref="h3" :style="{ opacity: wordOpacity, width: h3Width }">{{ data.title }}</h3>
    <span ref="span" :style="{ opacity: wordOpacity, width: spanWidth }">{{ data.description }}</span>
  </div>
</template>



<style lang='less' scoped>
@import '~@/styles/var.less';

.img-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;

  .loader {
    position: absolute;
    width: 110%;
    height: 110%;
  }

  h3,
  span {
    position: absolute;
    top: 50%;
    left: 10%;
    color: #fff;
    letter-spacing: 8px;
    overflow: hidden;
    white-space: nowrap;
    transition: 0.5s;
  }

  h3 {
    transform: translateY(-20px);
    font-size: 30px;
  }

  span {
    transform: translateY(30px);
  }


}
</style>